<template>
  <div class="four wide column">
    <router-link class="ui button mini primary" to="/">Back Home</router-link>
    <div class="ui fluid vertical pointing menu">

    </div>
  </div>
</template>

<script>
  import Notification from '@/components/Notification';

export default {
  name: 'LogInForm',
  components: {
    Notification,
  },
  data() {
    return {
      email: '',
      password: '',
      notification: {
        message: '',
        type: '',
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    const token = localStorage.getItem('tweetr-token');

    return token ? next('/') : next();
  },
  methods: {
    login() {
      axios
        .post('/login', {
          email: this.email,
          password: this.password,
        })
        .then(response => {
          localStorage.setItem('tweetr-token', response.data.data.token)
          this.$router.push('/')
        })
        .catch(error => {
          this.email = this.password = ''
          this.notification = Object.assign({}, this.notification, {
            message: error.response.data.message,
            type: error.response.data.status,
          });
        });
    },
  },
};
</script>
